<template>
  <div class='App'>
    <nav>
      <div class="img">
        <img :src=image alt="">
      </div>
      <div style="height:60px" v-for="item in navList" :key="item.path">
        <!-- <router-link class="nav-link" active-class="on" v-for="item in navList" :key="item.path" :to="item.path" >{{
        item.name
      }}</router-link> -->
        <router-link class="nav-link" active-class="on" v-if="item.path.indexOf('http') === -1" :key="item.path"
          :to="item.path">{{
            item.name
          }}</router-link>
        <a class="nav-link" v-else :href="item.path">{{ item.name }}</a>
      </div>
    </nav>
    <p></p>
    <!-- <keep-alive :include="find-page"> -->
      <router-view></router-view>
    <!-- </keep-alive> -->
  </div>
</template>

<script>

export default {
  name: 'App',
  /**
  * 定义组件的data函数，用于声明组件内部的状态。
  * 
  * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
  */
  data() {
    return {
      image: 'https://s2.music.126.net/style/web2/img/frame/topbar.png?e52adade1f4df5e242dac8537a78c78e',
      navList: [
        {
          path: '/find',
          name: '发现音乐'
        }, {
          path: '/music',
          name: '我的音乐'
        }, {
          path: '/focus',
          name: '关注'
        }, {
          path: 'https://music.163.com/store/product',
          name: '商城'
        }, {
          path: 'https://music.163.com/st/musician',
          name: '音乐人'
        }, {
          path: 'https://music.163.com/st/ad-song/login',
          name: '云推歌'
        }, {
          path: '/download',
          name: '下载客户端'
        }
      ]
    }
  },
  components: {

  },
}


</script>

<style scoped>
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #242424;
  color: #fff;
  font-size: 18px;
}

.img {
  height: 60px;
  width: 170px;
  position: relative;
  overflow: hidden;
}

.img img {
  position: absolute;
  top: -4px;
}

nav .nav-link {
  display: inline-block;
  padding: 0 20px;
  height: 60px;
  line-height: 60px;
  color: #fff;
}

nav .nav-link:hover {
  background: #000;
}

.App>p {
  padding: 3px 0;
  background: #c20c0c;
}

.on {
  position: relative;
  background: #000;
}

.on::after {
  content: "";
  display: block;
  position: absolute;
  transform: translateX(-50%);
  bottom: 1px;
  left: 50%;
  border: 5px solid transparent;
  border-bottom-color: #c20c0c;
}
</style>